import React, { Component } from "react";
import { setToken } from "../../utils/auth";
import { loginApi } from "../../services/auth";
import { Form, Input, Button, Layout, Space, message, Card } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import "./index.css";
import img from "../../graghs/logo.png";

const { Footer } = Layout;
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      password: "",
    };
  }
  trylogin = () => {
    let loginInfo = {
      id: parseInt(this.state.id),
      password: this.state.password,
    };
    if ((loginInfo.id === "") | (loginInfo.password === "")) {
      message.error("员工编号和密码不能为空");
    } else {
      loginApi(loginInfo).then(
        (response) => {
          console.log(response.data);
          if (response.data.result === "success") {
            message.success("登录成功");
            setToken(JSON.stringify(response.data.user));
            this.props.history.push({
              pathname: "/Home",
            });
          } else {
            message.info("登录失败，请重新输入");
          }
        },
        (error) => {
          console.log("数据获取失败", error);
        }
      );
    }
  };

  // 当员工编号发生改变
  onInputChangeun(e) {
    let inputValue = e.target.value;
    this.setState({
      id: inputValue,
    });
  }

  // 当密码发生改变
  onInputChangepw(e) {
    let inputValue = e.target.value;
    this.setState({
      password: inputValue,
    });
  }

  render() {
    return (
      <div className="back">
        <Card
          // title="登 录"
          className="login-form"
          headStyle={{ textAlign: "center" }}
          style={{ border: "none", background: "transparent" }}
        >
          <img src={img} />
          <br />
          <br />
          <br />
          <Form>
            <Form.Item
              name="id"
              rules={[
                {
                  required: true,
                  message: "请输入员工编号!",
                },
              ]}
            >
              <Input
                prefix={<UserOutlined id="site-form-item-icon" />}
                placeholder="用户名"
                className="login-input"
                onChange={(e) => this.onInputChangeun(e)}
              />
            </Form.Item>
            <Form.Item
              name="password"
              id="username"
              rules={[
                {
                  required: true,
                  message: "请输入密码！",
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                className="login-input"
                onChange={(e) => this.onInputChangepw(e)}
              />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <br></br>
              <div id="btn">
                <Space size="large">
                  <Button
                    type="primary"
                    onClick={this.trylogin}
                    style={{
                      borderRadius: "40px",
                      marginTop: "80px",
                      width: "160px",
                      height: "45px",
                    }}
                  >
                    登录
                  </Button>
                  <Button
                    htmlType="reset"
                    style={{
                      borderRadius: "40px",
                      marginTop: "80px",
                      width: "160px",
                      height: "45px",
                    }}
                  >
                    重置
                  </Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </Card>
        {/*<div className="image"></div>*/}

        <Footer className="footer">
          2018级系统分析与设计课程设计 Copyright © 2021 MIS Group 2
        </Footer>
      </div>
    );
  }
}
